<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="icon" type="image/png" href="assets/i/favicon.png">
	<link rel="stylesheet" href="css/amazeui.min.css">

	<body>
		<!-- Header -->
		<header data-am-widget="header" class="am-header am-header-default" style="height: 110px; line-height: 110px;">
			<div class="am-header-left am-header-nav">
				<a href="#doc-oc-demo1" data-am-offcanvas>
					<i class="am-header-icon am-icon-home am-icon-sm"></i>
				</a>
			</div>
			<h1 class="am-header-title" style="font-size: 4rem;"><a href="#doc-oc-demo1" data-am-offcanvas>资讯</a></h1>
		</header>
		<!--
        	作者：xiaofuwei008@sina.com
        	时间：2016-04-04
        	描述：侧边栏
        -->
		<div id="doc-oc-demo1" class="am-offcanvas">
			<div class="am-offcanvas-bar">
				<div class="am-offcanvas-content">
					<div class="am-container">
						<div class="am-g" style="margin-top: 20px;">
							<div class="am-u-sm-12">
								<a id="guanbicebianlan" data-rel="close">
									<img src="img/arrow_back_24px_1181650_easyicon.net.ico" />
								</a>
							</div>
						</div>
						<div class="am-g" style="margin-top: 20px;">
							<div class="am-u-sm-12">
								<a href="#">
									<img src="img/arrow_back_24px_1181650_easyicon.net.ico" />
								</a>
							</div>
						</div>
						<div class="am-g" style="margin-top: 20px;">
							<div class="am-u-sm-12">
								<a href="#">
									<img src="img/arrow_back_24px_1181650_easyicon.net.ico" />
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--
        	作者：xiaofuwei008@sina.com
        	时间：2016-04-04
        	描述：主内容
        -->
		<div class="am-u-sm-12" style="padding: 0px;margin: 0px;">
			<div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:true}'>
				<ul class="am-slides">
					<li>
						<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">

					</li>
					<li>
						<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">

					</li>
					<li>
						<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">

					</li>
					<li>
						<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">

					</li>
				</ul>
			</div>
		</div>
		<div class="am-u-sm-12" style="padding: 0px;margin: 0px;">
			<div id="wrapper">
				<div id="scroller">
					<ul>
						<li class="row">Row 1</li>
						<li class="row">Row 2</li>
						<li class="row">Row 3</li>
						<li class="row">Row 4</li>
						<li class="row">Row 5</li>
						<li class="row">Row 6</li>
						<li class="row">Row 7</li>
						<li class="row">Row 8</li>
						<li class="row">Row 9</li>
						<li class="row">Row 10</li>
						<li class="row">Row 11</li>
						<li class="row">Row 12</li>
						<li class="row">Row 13</li>
						<li class="row">Row 14</li>
						<li class="row">Row 15</li>
					</ul>
				</div>
			</div>
		</div>
		</div>
	</body>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/handlebars.min.js"></script>
	<script type="text/x-handlebars-template" id="tpi-list-item">
		{{#each this}}
		<li class="am-list-item-desced" data-id="{{id}}">
			<a href="{{alt}}" class="am-list-item-hd" target="_blank">{{title}}</a>

			<div class="am-list-item-text">{{content}}</div>
		</li>
		{{/each}}
	</script>
	<script src="js/amazeui.min.js"></script>
	<script>
		$(function() {
			guanbicebianlan();
			initIScroll();
		});
		/**
		 * js关闭侧边栏
		 */
		function guanbicebianlan() {
			var id = '#doc-oc-demo1';
			var $myOc = $(id);
			$('#guanbicebianlan').on('click', function() {
				$myOc.offCanvas($(this).data('rel'));
			});
		}
		/**
		 * 上拉/下拉加载数据
		 */
		function initIScroll(){
			var IScroll = $.AMUI.iScroll;
			var myScroll = new IScroll('#wrapper',{click:true});
			document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		}
		
	</script>

</html>